<!DOCTYPE html>
<html lang="en">
<head>


    <meta charset="utf-8">
    <title>大数据招聘数据分析系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="" name="author">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- App css -->
    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/app.min.css" rel="stylesheet" type="text/css">

</head>

<body id="body" class="dark-sidebar">
<!-- leftbar-tab-menu -->
<div class="left-sidebar">
    <!-- LOGO -->
    <div class="brand">
        <a href="" class="logo">
                    <span>
                        <img src="/static/static/picture/logo-sm.png" alt="logo-small" class="logo-sm">
                    </span>
            <span>
{#                        <img src="/static/static/picture/logo.png" alt="logo-large" class="logo-lg logo-light">#}
{#                        <img src="/static/static/picture/logo-dark.png" alt="logo-large" class="logo-lg logo-dark">#}
                        <span style="color: #fff">招聘数据分析可视化系统</span>
                    </span>
        </a>
    </div>
    <div class="sidebar-user-pro media border-end">
        <div class="position-relative mx-auto">
            <img src="/static/static/picture/user-4.jpg" alt="user" class="rounded-circle thumb-md">
            <span class="online-icon position-absolute end-0"><i class="mdi mdi-record text-success"></i></span>
        </div>
        <div class="media-body ms-2 user-detail align-self-center">
            <h5 class="font-14 m-0 fw-bold">{{ userInfo.username }}</h5>
            <p class="opacity-50 mb-0">用户名</p>
        </div>
    </div>
    <div class="border-end">
        <ul class="nav nav-tabs menu-tab nav-justified" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#Main" role="tab"
                   aria-selected="true"><span>主导航</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#Extra" role="tab"
                   aria-selected="false"><span>更多</span></a>
            </li>
        </ul>
    </div>
    <!-- Tab panes -->

    <!--end logo-->
    <div class="menu-content h-100" data-simplebar="">
        <div class="menu-body navbar-vertical">
            <div class="collapse navbar-collapse tab-content" id="sidebarCollapse">
                <!-- Navigation -->
                <ul class="navbar-nav tab-pane active" id="Main" role="tabpanel">
                    <li class="menu-label mt-0 text-primary font-12 fw-semibold"><span>导航栏</span><br><span
                            class="font-10 text-secondary fw-normal">Unique Dashboard</span></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarAnalytics" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarAnalytics">
                            <i class="ti ti-stack menu-icon"></i>
                            <span>数据可视化</span>
                        </a>
                        <div class="collapse " id="sidebarAnalytics">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/salaryChar/">薪资分析</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a href="/myApp/educationChar/" class="nav-link ">经验学历分析</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a href="/myApp/industryChar/" class="nav-link ">职业分析</a>
                                <li class="nav-item">
                                    <a href="/myApp/cityChar/" class="nav-link ">城市分析</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarAnalytics-->
                    </li><!--end nav-item-->

                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarCrypto" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarCrypto">
                            <i class="ti ti-forms menu-icon"></i>
                            <span>数据表格</span>
                        </a>
                        <div class="collapse " id="sidebarCrypto">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/tableData/">工作职位数据</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarCrypto-->
                    </li><!--end nav-item-->

                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsA" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-user menu-icon"></i>
                            <span>个人信息</span>
                        </a>
                        <div class="collapse " id="sidebarProjectsA">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/changeInfo/">信息管理</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/collectData/">收藏数据</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsB" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-cloud menu-icon"></i>
                            <span>数据词云图</span>
                        </a>
                        <div class="collapse " id="sidebarProjectsB">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/titleCloud/">工作词云</a>
                                </li><!--end nav-item-->
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/tagCloud/">工作标签词云</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->
                    <li class="nav-item">
                        <a class="nav-link" href="#sidebarProjectsC" data-bs-toggle="collapse" role="button"
                           aria-expanded="false" aria-controls="sidebarProjects">
                            <i class="ti ti-star menu-icon"></i>
                            <span>职位推荐</span>
                        </a>
                        <div class="collapse " id="sidebarProjectsC">
                            <ul class="nav flex-column">
                                <li class="nav-item">
                                    <a class="nav-link" href="/myApp/recommendPage/">职位推荐</a>
                                </li><!--end nav-item-->
                            </ul><!--end nav-->
                        </div><!--end sidebarProjects-->
                    </li><!--end nav-item-->
                    

                </ul>
                <ul class="navbar-nav tab-pane" id="Extra" role="tabpanel">
                    <li>
                        <div class="update-msg text-center position-relative">
                            <button type="button" class="btn-close position-absolute end-0 me-2"
                                    aria-label="Close"></button>
                            <img src="/static/static/picture/speaker-light.png" alt="" class="" height="110">
                            <h5 class="mt-0">更多信息</h5>
                            <p class="mb-3">请访问BOSS直聘官网</p>
                            <a href="https://www.zhipin.com/" class="btn btn-outline-warning btn-sm">访问</a>
                        </div>
                    </li>
                </ul><!--end navbar-nav--->
            </div><!--end sidebarCollapse-->
        </div>
    </div>
</div>
<!-- end left-sidenav-->
<!-- end leftbar-menu-->

<!-- Top Bar Start -->
<!-- Top Bar Start -->
<div class="topbar">
    <!-- Navbar -->
    <nav class="navbar-custom" id="navbar-custom">
        <ul class="list-unstyled topbar-nav float-end mb-0">
            

            <li class="dropdown">
                <a class="nav-link dropdown-toggle nav-user" data-bs-toggle="dropdown" href="#" role="button"
                   aria-haspopup="false" aria-expanded="false">
                    <div class="d-flex align-items-center">
                        <img src="/static/static/picture/user-4.jpg" alt="profile-user"
                             class="rounded-circle me-2 thumb-sm">
                        <div>
                            <small class="d-none d-md-block font-11">{{ userInfo.username }}</small>
                            <span class="d-none d-md-block fw-semibold font-12">用户 <i
                                    class="mdi mdi-chevron-down"></i></span>
                        </div>
                    </div>
                </a>
                <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item" href="#"><i class="ti ti-user font-16 me-1 align-text-bottom"></i> 个人信息</a>
                    <a class="dropdown-item" href="/myApp/home/"><i
                            class="ti ti-chart-area-line font-16 me-1 align-text-bottom"></i> 可视化大屏</a>
                    <div class="dropdown-divider mb-0"></div>
                    <a class="dropdown-item" href="/myApp/logOut"><i
                            class="ti ti-power font-16 me-1 align-text-bottom"></i> 退出登录</a>
                </div>
            </li><!--end topbar-profile-->
            
        </ul><!--end topbar-nav-->

        <ul class="list-unstyled topbar-nav mb-0">
            <li>
                <button class="nav-link button-menu-mobile nav-icon" id="togglemenu">
                    <i class="ti ti-menu-2"></i>
                </button>
            </li>
                     
        </ul>
    </nav>
    <!-- end navbar-->
</div>
<!-- Top Bar End -->
<!-- Top Bar End -->

<div class="page-wrapper">

    <!-- Page Content-->
    <div class="page-content-tab">

        <div class="container-fluid">
            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <div class="float-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">系统</a>
                                </li><!--end nav-item-->
                                <li class="breadcrumb-item"><a href="#">数据可视化</a>
                                </li><!--end nav-item-->
                                <li class="breadcrumb-item active">薪资分析</li>
                            </ol>
                        </div>
                        <h4 class="page-title">薪资分析</h4>
                    </div><!--end page-title-box-->
                </div><!--end col-->
            </div>
            <!-- end page title end breadcrumb -->


            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">各职业薪资区间</h4>
                                </div><!--end col-->
                            </div>  <!--end row-->
                        </div><!--end card-header-->
                        <script>
                            function rangeChange(e) {
                                location.href = '?range=' + e.target.value
                            }
                        </script>
                        <div class="card-body">
                            <div class="mb-3 row">
                                <label class="col-sm-1 col-form-label text-end">薪资范围选择</label>
                                <div class="col-sm-3">
                                    <select onchange="rangeChange(event)" class="form-select"
                                            aria-label="Default select example">
                                        {% for i in selectList %}
                                            {% if i == defaultse %}
                                                <option selected value="{{ i }}">{{ i }}</option>
                                            {% else %}
                                                <option | value="{{ i }}">{{ i }}</option>
                                            {% endif %}
                                        {% endfor %}

                                    </select>
                                </div>
                            </div>
                            <div id="main1" style="width: 100%;height: 550px;">
                            </div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->


            </div><!--end row-->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">各职业平均薪资</h4>
                                </div><!--end col-->
                            </div>  <!--end row-->
                        </div><!--end card-header-->
                        <div class="card-body">
                            <div id="main2" style="
                            width: 100%;height: 550px;"></div>
                        </div><!--end card-body-->
                    </div><!--end card-->
                </div> <!--end col-->


            </div><!--end row-->
        </div><!-- container -->

        <!--Start Rightbar-->
        <!--Start Rightbar/offcanvas-->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="Appearance" aria-labelledby="AppearanceLabel">
            <div class="offcanvas-header border-bottom">
                <h5 class="m-0 font-14" id="AppearanceLabel">Appearance</h5>
                <button type="button" class="btn-close text-reset p-0 m-0 align-self-center" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <h6>Account Settings</h6>
                <div class="p-2 text-start mt-3">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch1">
                        <label class="form-check-label" for="settings-switch1">Auto updates</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch2" checked="">
                        <label class="form-check-label" for="settings-switch2">Location Permission</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="settings-switch3">
                        <label class="form-check-label" for="settings-switch3">Show offline Contacts</label>
                    </div><!--end form-switch-->
                </div><!--end /div-->
                <h6>General Settings</h6>
                <div class="p-2 text-start mt-3">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch4">
                        <label class="form-check-label" for="settings-switch4">Show me Online</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="settings-switch5" checked="">
                        <label class="form-check-label" for="settings-switch5">Status visible to all</label>
                    </div><!--end form-switch-->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="settings-switch6">
                        <label class="form-check-label" for="settings-switch6">Notifications Popup</label>
                    </div><!--end form-switch-->
                </div><!--end /div-->
            </div><!--end offcanvas-body-->
        </div>
        <!--end Rightbar/offcanvas-->
        <!--end Rightbar-->

        <!--Start Footer-->
        <!-- Footer Start -->
        {#                <footer class="footer text-center text-sm-start">Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></footer>#}
        <!-- end Footer -->
        <!--end footer-->
    </div>
    <!-- end page content -->
</div>
<!-- end page-wrapper -->

<!-- Javascript  -->

<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/analytics-index.init.js"></script>


<!-- App js -->
<script src="/static/static/js/app.js"></script>

</body>
<!--end body-->
<script src="/static/static/js/echarts.js"></script>


    <script>
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var originalData = {
        legend: {{ typeSalaryX | safe }},  // 使用职位类型作为图例
        xAxisData: ['0-5k'],
        seriesData: {{ typeSalaryData | safe }}  // 直接使用薪资数据
    };

    function initChart() {
        var option = {
            tooltip: { trigger: 'axis' },
            legend: { 
                data: originalData.legend,
                type: 'scroll',  // 添加滚动条
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            grid: {
                right: '20%'  // 为图例留出空间
            },
            calculable: true,
            xAxis: [{ type: 'category', data: originalData.xAxisData }],
            yAxis: [{ type: 'value' }],
            series: []
        };

        originalData.legend.forEach((legendItem, index) => {
            option.series.push({
                name: legendItem,
                type: 'bar',
                data: [originalData.seriesData[index]],  // 注意这里要包装成数组
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            });
        });

        myChart.setOption(option);
    }

    function updateChart() {
        var option = {
            xAxis: [{ type: 'category', data: originalData.xAxisData }],
            yAxis: [{ type: 'value' }],
            series: []
        };

        originalData.legend.forEach((legendItem, index) => {
            option.series.push({
                name: legendItem,
                type: 'bar',
                data: [originalData.seriesData[index]],  // 注意这里要包装成数组
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            });
        });

        myChart.setOption(option);
    }

    initChart();
</script>
<script>
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;
    var scaleData = {{ averageTypeData | safe }}
    var placeHolderStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
        }
    };
    var data = [];
    var color = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)', 'rgb(43, 166, 254)'];
    for (var i = 0; i < scaleData.length; i++) {
        data.push({
            data: scaleData[i].value,
            value: 20,
            name: scaleData[i].name,
            itemStyle: {
                normal: {
                    color: color[i],
                }
            }
        }, {
            value: 8,
            name: '',
            itemStyle: placeHolderStyle
        });
    }
    data.push({
        value: 40,
        name: '',
        itemStyle: placeHolderStyle
    })
    var seriesObj = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [100, 200],
        hoverAnimation: false,
        startAngle: -30,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'inner',
                    fontSize: 14,
                    lineHeight: 15,
                    formatter: function (params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < scaleData.length; i++) {
                            total += scaleData[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== '') {
                            // return params.name + '\n' + params.data.data;
                            if (params.name.length > 4) {
                                return params.name.slice(0, 3) + '\n' + params.name.slice(3);
                            } else {
                                return params.name;
                            }

                        } else {
                            return '';
                        }
                    }
                },
                labelLine: {
                    length: 30,
                    length2: 60,
                    show: true
                }
            }
        },
        data: data
    }, {
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [100, 200],
        hoverAnimation: false,
        startAngle: -30,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    fontSize: 18,
                    formatter: function (params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < scaleData.length; i++) {
                            total += scaleData[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== '') {
                            return params.data.data;
                        } else {
                            return '';
                        }
                    }
                },
                labelLine: {
                    length: 20,
                    length2: 30,
                    show: true
                }
            }
        },
        data: data
    }];
    option = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                // 直接从params.data中获取对应的name和value（假设params.data结构和scaleData里元素结构一致）
                var name = params.data.name;
                var value = params.data.data;
                return name + " : " + value;
            }
        },
        legend: {
            show: false
        },
        toolbox: {
            show: false
        },
        series: seriesObj,
        graphic: [{
            type: 'group',
            left: 'center',
            top: 'middle',
            children: [{
                type: 'text',
                z: 100,
                left: 'center',
                top: '0',
                style: {
                    fill: '#333',
                    text: [
                        '职业平均薪资'
                    ],
                    font: '16px Microsoft YaHei'
                }
            },
                {
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: '32',
                    style: {
                        fill: 'red',
                        font: '26px Microsoft YaHei'
                    }
                }
            ]
        }]
    }
    option && myChart.setOption(option);
</script>
</html>